import MessageItem from "../../components/MessageItem";
import {useContext} from 'react';
import { MessageListContext } from "../../App";
import { OperationData } from "../../api";
import { Empty } from "antd";


const FilePage = () => {
  // let {messageList,currentMessage,setCurrentMessage,messageStatusList} = useContext(MessageListContext);
  const context = useContext(MessageListContext);

  console.log('messageList:',context.messageList);
  console.log('messageStatusList:',context.messageStatusList)
  
  return (
    <div style={{height:'100%',backgroundColor:'white'}}>
      {/* <h1>Trace Page</h1> */}
      {
        context.messageList.length === 0 && <Empty></Empty>
      }
      {
        context.messageList && context.messageList.map((message: OperationData, index: number) => {

          if(message.hook_type === 'File')
          return <MessageItem 
          key={index} 
          message={message} 
          currentMessage={context.currentMessage} 
          setCurrentMessage={context.setCurrentMessage}
          currentMessageStatus={context.currentMessageStatus}
          setCurrentMessageStatus={context.setCurrentMessageStatus}
          messageStatus={context.messageStatusList[index].status}
          ></MessageItem>
        })
      }
      {/* <MessageItem></MessageItem> */}
    </div>
  );
};

export default FilePage;